---
import MainHead from '../components/MainHead.astro';
import Button from '../components/Button/index.jsx';
import Footer from '../components/Footer/index.jsx';
import Nav from '../components/Nav/index.jsx';

const { content } = Astro.props;
---

<html lang={content.lang || 'en'}>
	<head>
		<MainHead title={content.title} description={content.description} />
		<style lang="scss">
			.hero {
				padding: 8rem;
				display: flex;
				background-color: var(--t-fg);
				background-repeat: no-repeat;
				background-size: cover;
				min-height: 25vw;
				color: white;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.tag {
				margin-left: 0.5em;
				margin-right: 0.5em;
				text-transform: uppercase;

				&:nth-of-type(1n) {
					color: var(--c-green);
				}
				&:nth-of-type(2n) {
					color: var(--c-orange);
				}
				&:nth-of-type(3n) {
					color: var(--c-blue);
				}
				&:nth-of-type(4n) {
					color: var(--c-pink);
				}
			}

			.title {
				font-size: var(--f-u10);
				font-weight: 900;
				text-transform: uppercase;
				letter-spacing: 0.0625em;
			}

			.leadIn {
				color: var(--t-bg);
				background-color: var(--t-fg);
			}

			.tagline {
				font-weight: 300;
				font-size: var(--f-u3);
				line-height: 1.5;
			}

			.content {
				font-size: var(--f-u1);
				line-height: 2.2;
			}
		</style>
	</head>
	<body>
		<Nav />
		<header style={`background-image:url(${content.img})`} class="hero">
			<h1 class="title">{content.title}</h1>
		</header>
		<div class="leadIn">
			<div class="wrapper pt8 pb8 mb8 tac">
				{content.tags.map((t) => <span class="tag">{t}</span>)}
				<h3 class="tagline">{content.description}</h3>
			</div>
		</div>
		<div class="wrapper wrapper__readable">
			<div class="content"><slot /></div>
		</div>
		<footer class="tac mt6">
			<a href="/projects">
				<Button>View More</Button>
			</a>
		</footer>
		<Footer />
	</body>
</html>
